<template>
	<div class="outer">{{ value }}</div>
	<div class="outer">{{ num }}</div>
	<!-- <teleport to='body'></teleport> -->
	<el-button type="warning" @click="changeConfirm">点我</el-button>
	<el-button type="warning" @click="getParent($parent)">获取$parent</el-button>
	<!-- 默认插槽 -->
	<slot></slot>
	<!-- 具名插槽 -->
	<slot name="detail"></slot>
	<!-- 作用于插槽 -->
	<slot name="test" item="测试数据"></slot>
</template>

<script setup>
import emitter from '@/utils/mitt'
const emit = defineEmits(['confirm'])
const props = defineProps({
	value: {
		type: [String, Number],
		default: ''
	}
})
function changeConfirm() {
	// 结束监听
	emitter.off('receive')
	// 监听
	emitter.on('receive', (data) => {
		console.log(data)
	})
	emit('confirm', props.value)
}

function getParent(parent) {
	console.log(parent)
	parent.count += 100
}

const num = ref(1)
defineExpose({ num })
</script>

<style lang="scss" scoped></style>
